<template>
  <transition name="el-zoom-in-top">
    <div v-if="visible"
         class="contextmenu-mask"
         @contextmenu.stop
         @mousedown.stop="onCloseMask">
      <ul ref="contextmenu"
          class="border-box contextmenu"
          :style="{ left: left + 'px', top: top + 'px' }">
        <template v-for="(item,index) in menuItems">
          <li v-if="item.text === '-'"
              :key="`contextmenu-${index}`"
              class="context-menu-line"></li>
          <li v-else
              :key="`contextmenu-${index}`"
              class="context-menu-item d-flex align-items-center"
              :class="{'is-disibled':item.disabled && typeof item.disabled === 'function' ? item.disabled(item) : item.disabled}"
              @click="!(item.disabled && typeof item.disabled === 'function' ? item.disabled(item) : item.disabled) && onMenuClick($event,item)">
            <div class="context-ment-item-icon">
              <ju-icon v-if="item.icon && (item.icon.type === 1 || item.icon.type === 2)"
                       :icon="item.icon.code"
                       :svg-icon="item.icon.type === 2"></ju-icon>
            </div>
            <div class="context-ment-item-text">
              {{ item.text }}
            </div>
          </li>
        </template>
      </ul>
    </div>
  </transition>
</template>

<script lang="ts">
  import { Component, Prop, Mixins } from "@some21/vue-class-decorator";
  import { IContextMenuItem } from "./IContextMenuItem";
  // import { PopupManager } from "element-ui/lib/utils/popup";
  import Popup from "element-ui/lib/utils/popup";
  // console.log(PopupManager);
  // debugger;
  @Component({
    name: "JuContextMenu",
  })
  export default class extends Mixins(Popup) {
    $refs: {
      contextmenu: HTMLUListElement;
    };
    // /** 是否显示 */
    // @Prop({ type: Boolean, default: true })
    // visible: boolean;
    // /** 菜单项目集合 */
    @Prop({ type: Array, default: true })
    menuItems: IContextMenuItem[] = [];
    /** 距离页面左侧聚类 */
    @Prop({ type: Number, default: 0 })
    left: number;
    /** 距离页面顶部距离 */
    @Prop({ type: Number, default: 0 })
    top: number;

    onCloseMask(ev) {
      if (!this.$refs.contextmenu.contains(ev.target)) {
        this.visible = false;
        this.$el.parentElement.removeChild(this.$el);
        this.$destroy();
      }
    }

    onMenuClick(ev, item: IContextMenuItem) {
      if (item.onClick) {
        item.onClick(ev, item);
        this.visible = false;
        this.$el.parentElement.removeChild(this.$el);
        this.$destroy();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .contextmenu-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.001%);
  }
  .contextmenu {
    position: absolute;
    box-shadow: 1px 1px 10px var(--theme-gray-500);
    border: 1px solid var(--theme-gray-300);
    border-radius: 6px;
    padding: 5px 0;
    min-width: 210px;
    max-width: 300px;
    margin: 0;
    list-style: none;
    background-color: var(--theme-gray-100);
    font-size: 0;

    > li {
      &.context-menu-line {
        font-size: 0;
        border-top: 1px solid var(--theme-gray-400);
        padding: 0 10px;
      }
      &.context-menu-item {
        padding: 10px;
        font-size: 14px;
        // color: #444;

        &.is-disibled {
          color: var(--theme-gray-500);
          cursor: default;
        }

        &:not(.is-disibled):hover {
          cursor: pointer;
          background-color: var(--theme-gray-200);
          color: var(--theme-primary);
        }
        .context-ment-item-icon {
          width: 16px;
          height: 16px;
        }
        .context-ment-item-text {
          padding-left: 5px;
          flex: 1;
        }
      }
    }
  }
</style>
